<template>
  <div>
    <el-dialog title="客户详情" :visible.sync="showDialog_"
               top="0%" custom-class='dialog_right dialogScroll_detail  MkPropertyCustomerDetail'
               @open="openDialog" @close="closeDialog">
      <div class="operationBtnInRightDialog">
        <span class='infoIcon'  @click="dialogVisible_edit = true;"><i class="el-icon-edit"></i> 编辑</span>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">
        <div class="contentDiv">
          <div class="detail-box">
            <h5>基本信息</h5>
            <div class="detail-list-box">
              <el-row :gutter="20" class="detail-item">
                <el-col :span="6">客户名称</el-col>
                <el-col :span="18">{{ customerDetail.customerName }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="6">票据抬头</el-col>
                <el-col :span="18">{{ customerDetail.billHeader }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="6">社会信用代码</el-col>
                <el-col :span="18">{{ customerDetail.creditCode }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="6">联系人</el-col>
                <el-col :span="18">{{ customerDetail.contact }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="6">联系电话</el-col>
                <el-col :span="18">{{ customerDetail.contactPhone }}</el-col>
              </el-row>
            </div>
          </div>


          <div class="detail-box">
            <h5>社区信息</h5>
            <div class="detail-list-box">
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">社区名称</el-col>
                <el-col :span="20">{{ customerDetail.communityName }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">物业名称</el-col>
                <el-col :span="20">{{ customerDetail.propertyName }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">有效日期</el-col>
                <el-col :span="20">{{ customerDetail.expireDate | formatDate('yyyy-MM-dd') }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">所在城市</el-col>
                <el-col :span="20">{{ customerDetail.city }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">服务站点</el-col>
                <el-col :span="20">{{ customerDetail.site }}</el-col>
              </el-row>
            </div>
          </div>

          <div class="detail-box">
            <h5>管理员信息</h5>
            <div class="detail-list-box">
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">姓名</el-col>
                <el-col :span="20">{{ customerDetail.adminName }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">身份证号</el-col>
                <el-col :span="20">{{ customerDetail.idCard }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">联系电话</el-col>
                <el-col :span="20">{{ customerDetail.adminPhone }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">支付Key</el-col>
                <el-col :span="20">{{ customerDetail.payKey }}</el-col>
              </el-row>
              <el-row :gutter="20" class="detail-item">
                <el-col :span="4">支付密钥</el-col>
                <el-col :span="20">{{ customerDetail.paySecret }}</el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>

    <!--编辑-->
    <mk-add-property-customer :showDialog="dialogVisible_edit" @closeDialog="closeDialog_edit" :currentCustomer = 'customerDetail'></mk-add-property-customer>
  </div>
</template>

<script>
  import customerService from '../../../services/customer'
  import MkAddPropertyCustomer from  './MkAddPropertyCustomer.vue'
  import {mapState} from 'vuex'
  export default {
    name: 'MkPropertyCustomerDetail',
    props: ['showDialog', 'currentCustomerId'],
    components:{
      MkAddPropertyCustomer
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight
    }),
    filters: {
      formatDate(val,type) {
          if(val) {
              if(val == '已过期'){
                  return val;
              }
              return new Date(val).pattern(type);
          }
      }
    },
    watch: {
      showDialog: function (value) {
        this.showDialog_ = value;
      }
    },
    mounted:function(){

    },
    methods: {
      closeDialog_edit(type) {
        this.isRefresh = type;
        this.dialogVisible_edit = false;
        this.showDialog_ = false;
      },
      loadData() {
        customerService.loadPropertyCustomerDetailServer({id:this.currentCustomerId},data=>{
          this.customerDetail = data.data;
        })
      },
      openDialog () {
        this.isRefresh = false;
        this.loadData();
      },
      closeDialog () {
        this.$emit('closeDialog',this.isRefresh);
      },
    },

    data () {
      return {
        isRefresh: 'no',
        dialogVisible_edit: false,
        customerDetail: {},
        showDialog_: this.showDialog,
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/main.less';
  .MkPropertyCustomerDetail {
    .operationBtn{
      position: absolute;
      top:30px;
      right:60px;
      .editInfoIcon{
        padding:5px 10px;
        cursor: pointer;
        color:#81939e;
        &:hover{
          color:@primaryColor;
        }
      }
      .operationLine{
        color:@borderColor;
      }
    }
    .detail-box {
      h5 {
        font-size: 18px;
        color: @fontColorOne;
        font-weight: normal;
      }
      .detail-list-box {
        margin: 20px 0 40px 0;
        padding: 30px;
        background-color: #F9FAFA;
      }
      .el-row {
        line-height: 40px;
      }
      .el-col-4, .el-col-6 {
        color: @fontColorThree;
        text-align: right;
      }
    }
    .detail-item {
      .el-col:nth-child(2) {
        word-break: break-all;
      }
    }
  }
</style>
